<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        input{
            width: 250px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        .btn{
            width: 150px;
        }

        .tip{
            color: #ff0000;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div>
        <h1>用户注册</h1>
        <form >
            用户名:
            <input type="text" id="username" name="username" placeholder="用户名不能为空且长度在4-16">
            <span class="tip" id="name_msg"></span><br>

            手机号:
            <input type="text" id="phone" name="phone" placeholder="手机号不能为空且为十一位">
            <span class="tip" id="phone_msg"></span><br>
            <br>

            <input type="submit" value="提交" class="btn">
            <input type="reset" value="重置" class="btn">

        </form>
    </div>


    <!-- 外部脚本 注意：如果js模块化了，导入时需添加type类型为module-->
    <script type="module" src="js/check.js"></script>
</body>
</html>